<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="原相机视频"></TopNav>
		<view class="check-banner progress" v-if="detailData && detailData.status == 0">
			<image src="/static/images/index/check.png" mode=""></image>
			<text>资料正在审核中，请耐心等待。</text>
		</view>
		<view class="check-banner pass" v-else-if="detailData && detailData.status == 1">
			<image src="/static/images/index/pass.png" mode=""></image>
			<text>资料审核通过。</text>
		</view>
		<view class="check-banner reject" v-else-if="detailData && detailData.status == 2">
			<image src="/static/images/index/reject.png" mode=""></image>
			<text>资料审核不通过，请重新提交申请。</text>
		</view>
		<view class="main">
			<view>
				<text class="f-w500 f-s20">视频录制</text>
			</view>
			<view class="m-b15 m-t8 f-s14 text-gray">
				<text>请化淡妆录制，客户可查看</text>
			</view>
			<view class="flex flex-wrap justify-between">
				<UploadVideo width="220rpx" height="220rpx" capture="camera" v-model="form.video">
					<view class="upload-image">
						<image src="/static/images/login/video.png" class="width-28" mode="widthFix"></image>
						<text class="m-t8 text-gray f-s12">录制视频</text>
					</view>
				</UploadVideo>
			</view>
			<view class="m-t40">
				<view class="f-s15 text-bold">
					<text>录制要求</text>
				</view>
				<view class="m-t10 text-gray f-s14">
					<text>1.请原相机录制视频</text>
				</view>
				<view class="text-gray f-s14">
					<text>2.请面向镜头并漏出全脸，不可遮挡面部</text>
				</view>
				<view class="text-gray f-s14">
					<text>3.需求录制至少5秒以上</text>
				</view>
			</view>
			<view class="m-t30">
				<view class="f-s15 text-bold">
					<text>录制要求</text>
				</view>
				<view class="text-theme m-t8 f-s14">
					<text>如果颜值与照片/视频差距太大，或浓妆拍摄，有可能无法通过审核</text>
				</view>
			</view>
			<view class="fixed-bottom p-lr16" @click="handleConfirm">
				<view class="self-btn full-width" hover-class="pressed">
					<text>重新提交</text>
				</view>
			</view>
		</view>
		<Toast></Toast>
		<Modal :show.sync="modalShow" title="提示" content="您是否确认重新提交审核？\n如果存在正在审核中数据将被覆盖" @confirm="handleModalConfirm">
		</Modal>
	</view>
</template>

<script>
	import Modal from '@/components/modal'
	import UploadVideo from '@/components/upload-video'
	import {
		authStepsDetails,
		videoAuth
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		components: {
			Modal,
			UploadVideo
		},
		data() {
			return {
				modalShow: false,
				detailData: {},
				form: {
					video: ''
				}
			}
		},
		onLoad() {
			this.getDetail()
		},
		methods: {
			handleModalConfirm() {
				if (!this.validateForm(this.form)) return
				// 搭搭认证（实名认证）
				this.form.cover_online = 2
				this.$modal.loading("正在提交").then(() => {
					videoAuth(this.form).then(res => {
						this.$modal.closeLoading()
						this.getDetail()
						this.$toast(res.msg)
					}).catch(() => this.$modal.closeLoading())
				})
			},
			getDetail() {
				authStepsDetails({
					auth_type: 5
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					this.detailData = auth_detail
					this.form.video = auth_detail?.video ?? ''
				})
			},
			handleConfirm() {
				this.modalShow = true
			},
			validateForm(form) {
				if (!form.video) {
					this.$toast('请上传录制视频')
					return false
				}
				return true
			}
		}


	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.container {
		.main {
			padding: 24rpx 32rpx;
		}
	}
</style>